import React, { Component } from 'react';
import style from './MenuPanel.css';
import menuConfig from '../menu.json';

export default class MenuPanel extends Component {
  render() {
    const item_width = ( 100 / menuConfig.menu.button.length ).toFixed( 2 ) + '%';

    return (
      <div className={ style.MenuPanel }>
        <ul className={ style.MenuContainer }>
        {
          menuConfig.menu.button.map( (menu, index) => {
            return (
              <li className={ style.Level1MenuItem } style={{ width: item_width }} key={index}>
                  <a style={ {
                      borderRight: index !== ( menuConfig.menu.button.length - 1) ? '1px solid #e7e7eb' : '0px'
                    } }>
                    { menu.name }
                  </a>
              </li>
            );
          } )
        }
        </ul>
      </div>
    );
  }
}
